<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: zhang
  Date: 2023/10/3
  Time: 20:27
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>own_blog</title>
    <link href="//unpkg.com/layui@2.8.17/dist/css/layui.css" rel="stylesheet">
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        .top {
            margin: 0px auto;
        }

        .item {
            font-size: 40px;
            text-align: center;
            line-height: 150px;
            font-family: "华文琥珀";
            color: #ffffff;
            border-radius: 10px;
        }

        .item:nth-child(1) {
            background-image: url("${pageContext.request.contextPath}/img/beijing01.png");
        }

        .item:nth-child(2) {
            background-image: url("${pageContext.request.contextPath}/img/beijing02.png");
        }

        .item:nth-child(3) {
            background-image: url("${pageContext.request.contextPath}/img/beijing03.png");
        }

        .item:nth-child(4) {
            background-image: url("${pageContext.request.contextPath}/img/beijing04.png");
        }

        /*.item:nth-child(1) {*/
        /*    background: #051937; !* fallback for old browsers *!*/
        /*    background: -webkit-linear-gradient(to right, #a8eb12, #00bf72, #008793, #004d7a, #051937); !* Chrome 10-25, Safari 5.1-6 *!*/
        /*    background: linear-gradient(to right, #a8eb12, #00bf72, #008793, #004d7a, #051937); !* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ *!*/
        /*}*/

        /*.item:nth-child(2) {*/
        /*    background: #009FFF; !* fallback for old browsers *!*/
        /*    background: -webkit-linear-gradient(to right, #ec2F4B, #009FFF); !* Chrome 10-25, Safari 5.1-6 *!*/
        /*    background: linear-gradient(to right, #ec2F4B, #009FFF); !* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ *!*/

        /*}*/

        /*.item:nth-child(3) {*/
        /*    background: #4284DB; !* fallback for old browsers *!*/
        /*    background: -webkit-linear-gradient(to right, #29EAC4, #4284DB); !* Chrome 10-25, Safari 5.1-6 *!*/
        /*    background: linear-gradient(to right, #29EAC4, #4284DB); !* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ *!*/
        /*}*/

        /*.item:nth-child(4) {*/
        /*    background: #0575E6; !* fallback for old browsers *!*/
        /*    background: -webkit-linear-gradient(to right, #021B79, #0575E6); !* Chrome 10-25, Safari 5.1-6 *!*/
        /*    background: linear-gradient(to right, #021B79, #0575E6); !* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ *!*/

        /*}*/

        .bottom {
            position: relative;
            width: 1500px;
            height: 900px;
            margin: 0px auto;
        }

        #bright {
            position: absolute;
            top: 20px;
            right: 0px;
            width: 1150px;
        }

        .userinfo {
            position: absolute;
            top: 20px;
            left: 0px;
            width: 350px;
            height: 650px;
            border-radius: 10px;
            /*background-color: #00bf72;*/
            background-image: url("${pageContext.request.contextPath}/img/userinfobeijing.png");
            background-size: cover;
        }

        .uinfo {
            width: 290px;
            margin: 10px auto;
            background-color: rgba(0, 0, 0, 0.59);
            border-radius: 10px;
            overflow: hidden;

        }

        .uinfo > .touxiang {
            width: 140px;
            height: 60px;
            border:3px solid #eaeaea;
            border-radius: 20px;
            /*background: #000046; !* fallback for old browsers *!*/
            /*background: -webkit-linear-gradient(to left, #1CB5E0, #000046); !* Chrome 10-25, Safari 5.1-6 *!*/
            /*background: linear-gradient(to left, #1CB5E0, #000046); !* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ *!*/
            line-height: 60px;
            text-align: center;
            margin: 20px auto;
            font-size: 25px;
            font-family: "思源黑体";
            font-weight: bolder;
            color: #ffffff;
        }

        .infoitem {
            width: 260px;
            overflow: hidden;
            font-weight: bolder;
            margin: 15px;
        }

        .infoitem > .tit {
            width: 70px;
            height: 20px;
            font-size: 15px;
            text-align: center;
            line-height: 20px;
            float: left;
            color: #ffffff;
            font-family: "思源黑体";
        }

        .infoitem > .cont {
            width: 160px;
            font-size: 15px;
            text-align: left;
            line-height: 20px;
            float: left;
            color: #ffffff;
            font-family: "微软雅黑 Light";
            font-weight: bolder;
            margin-left: 5px;
        }

        .ldao {
            width: 200px;
            background-color: rgba(255, 255, 255, 0);
            margin: 30px auto;
            text-align: center;
        }

        .ldao li {
            border-radius: 5px;
            margin-top: 5px;
        }

        .ldao li > a {
            width: 100px;
            line-height: 60px;
            border-radius: 5px;
            font-size: 17px;
            font-family: "微软雅黑";
            font-weight: bolder;
            float: left;
        }

        .ldao li > i {
            width: 50px;
            color: #dddddd;
            font-size: 25px;
            float: left;
            margin-top: 5px;
        }
    </style>

</head>
<body>
<div class="layui-carousel top" id="ID-carousel-demo-2">
    <div carousel-item>
        <div class="item">own_blog</div>
        <div class="item">own_blog</div>
        <div class="item">own_blog</div>
        <div class="item">own_blog</div>
    </div>
</div>
<div class="bottom">
    <div class="userinfo">
        <div class="uinfo">
            <div class="touxiang">
                ${sessionScope.user.uname}
            </div>
            <div class="infoitem">
                <div class="tit">出生日期:</div>
                <div class="cont">
                    <c:if test="${sessionScope.user.ubirthday == null}">
                        0000-00-00
                    </c:if>
                    <c:if test="${sessionScope.user.ubirthday != null}">
                        ${sessionScope.user.ubirthday}
                    </c:if>
                </div>
            </div>
            <div class="infoitem">
                <div class="tit">自我描述:</div>
                <div class="cont">
                    <c:if test="${sessionScope.user.udesc == null}">
                        暂无
                    </c:if>
                    <c:if test="${sessionScope.user.udesc != null}">
                        ${sessionScope.user.udesc}
                    </c:if>
                </div>
            </div>
        </div>
        <ul class="ldao layui-nav layui-nav-tree">
            <li class="layui-nav-item layui-this"><i class="layui-icon layui-icon-read"></i><a
                    href="${pageContext.request.contextPath}/allblog.jsp" target="myright">博客文章</a></li>
            <li class="layui-nav-item"><i class="layui-icon layui-icon-cellphone"></i><a href="${pageContext.request.contextPath}/blog/split_user.action?page=1" target="myright">我的文章</a>
            </li>
            <li class="layui-nav-item"><i class="layui-icon layui-icon-dialogue"></i><a href="javascript:;">我的评论</a>
            </li>
            <li class="layui-nav-item"><i class="layui-icon layui-icon-set"></i><a
                    href="${pageContext.request.contextPath}/updateUser.jsp" target="myright">修改信息</a></li>
            <li class="layui-nav-item"><i class="layui-icon layui-icon-backspace"></i><a
                    href="${pageContext.request.contextPath}/user/logout.action">退出登录</a></li>
<%--            <li class="layui-nav-item"><i class="layui-icon layui-icon-clear"></i><a onclick="deleteInfo(${sessionScope.user.uid})">注销账户</a></li>--%>
        </ul>
    </div>

    <!--下部分右边-->
    <div id="bright">
        <iframe frameborder="0" scrolling="no" name="myright" width="1150px" height="900px" src="allblog.jsp"></iframe>
    </div>
</div>
<script>
    function deleteInfo(uid) {
        const r = confirm("确定要注销吗？");
        if (r) {
            alert("删除成功");
            window.location.href='${pageContext.request.contextPath}/user/delet.action?uid='+uid;
            return true;
        }
        return false;
    }
</script>

<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
<script src="//unpkg.com/layui@2.8.17/dist/layui.js"></script>
<script>
    layui.use(function () {
        var carousel = layui.carousel;

        // 渲染 - 设置时间间隔、动画类型、宽高度等属性
        carousel.render({
            elem: '#ID-carousel-demo-2',
            interval: 2000,
            anim: 'fade',
            width: '1500px',
            height: '150px'
        });
    });
</script>

</body>
</html>
